<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Tabs Example</title>
    <link rel="stylesheet" type="text/css" href="./js/ext/resources/css/ext-all.css" />    
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="./js/ext/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="./js/ext/ext-all.js"></script>

    <!-- Tabs Example Files -->
<!--     <link rel="stylesheet" type="text/css" href="tabs-example.css" />  -->   
<SCRIPT LANGUAGE="JavaScript">
<!--
	Ext.onReady(function(){
		Ext.QuickTips.init();
		//标签页
		var tabs = new Ext.TabPanel({
			renderTo: 'tabs',
			activeTab: 0,
			closable: true,
			items:[
				{contentEl:'tab1', title:'Tab 1'},
				{contentEl:'tab2', title:'Tab 2'}
			],
			tbar:[{
				text: '菜单',
				handler: function(bar){
					var parent = bar.ownerCt.ownerCt;
					//parent.hide();
				}
			},{
				text: '打开表单',
				handler: function(bar){
					form.show();
				}
			},{
				text: '关闭表单',
				handler: function(bar){
					form.hide();
				}
			}]
		});

		//表单
		var form  = new Ext.FormPanel({
			title:"测试表单",
			id: 'form',
			applyTo:'form',
			frame: true,
			//collapsed: true,
			animCollapse: true,
			collapsible: true,
			closable: true,
			//draggable: true,
			
			defaultType:'textfield',
			items:[{
				fieldLabel:'用户名',
			},{
				fieldLabel:'密码'
			}],
			buttonAlign: 'left',
			buttons:[{
				text: '保存',
			},{
				text: '关闭',
				handler: function(btn){
					btn.ownerCt.ownerCt.hide();
				}
			}],
			tools:[{
				id:'refresh',
				qtip: 'Refresh form Data',
				handler: function(ref){
					Ext.Msg.alert('refresh','刷新操作.....');
				}
			},{
				id:'close',
				qtip: '关闭窗口',
				handler: function(event,toolEl,panel,tc){
					//clo.ownerCt.hide();
					panel.hide();
					//console.log(tc);
				}
			}]
		}).hide();
	});
//-->
</SCRIPT>
</head>

<body>
<div id="tabs" style="padding:10px"></div>
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>

<div id="form" style="padding:10px"></div>
</body>
</html>